<template>
  <div class="page">
    <div class="charts-group">
      <div id="region_charts" class="charts-item" :style="{ width: '560px', height: '340px' }"></div>
      <div class="table-box">
        <el-table :data="regionTableData" max-height="340">
          <el-table-column prop="region" label="地区"/>
          <el-table-column prop="userCount" label="用户数"/>
          <el-table-column prop="percentage" label="占比">
            <template #default="scope">
              <span>{{scope.row.percentage}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="charts-group">
      <div id="education_charts" class="charts-item" :style="{ width: '560px', height: '340px' }"></div>
      <div class="table-box">
        <el-table :data="educationTableData" max-height="340">
          <el-table-column prop="education" label="学历"/>
          <el-table-column prop="userCount" label="用户数"/>
          <el-table-column prop="percentage" label="占比">
            <template #default="scope">
              <span>{{scope.row.percentage}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="charts-group">
      <div id="position_charts" class="charts-item" :style="{ width: '560px', height: '340px' }"></div>
      <div class="table-box">
        <el-table :data="positionTableData" max-height="340">
          <el-table-column prop="position" label="职位"/>
          <el-table-column prop="userCount" label="用户数"/>
          <el-table-column prop="percentage" label="占比">
            <template #default="scope">
              <span>{{scope.row.percentage}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="charts-group">
      <div id="age_group_charts" class="charts-item" :style="{ width: '560px', height: '340px' }"></div>
      <div class="table-box">
        <el-table :data="ageGroupTableData" max-height="340">
          <el-table-column prop="ageGroup" label="年龄"/>
          <el-table-column prop="userCount" label="用户数"/>
          <el-table-column prop="percentage" label="占比">
            <template #default="scope">
              <span>{{scope.row.percentage}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'
import * as echarts from "echarts";

const regionTableData = ref([])
const educationTableData = ref([])
const positionTableData = ref([])
const ageGroupTableData = ref([])
const chartsObj = {}
const initLineCharts = (id, title, name, data) => {
  if (!chartsObj[id]) {
    chartsObj[id] = echarts.init(document.getElementById(id));
  }
  chartsObj[id].setOption({
    title: {
      text: title,
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {d}%'
    },
    legend: {
      orient: 'vertical',
      top: 'middle',
      left: 'left',
    },
    series: [
      {
        name: name,
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          formatter: '{b}: {d}%'
        },
      }
    ]
  });
}
onMounted(() => {
  window.onresize = function () {
    Object.keys(chartsObj).forEach((k) => {
      chartsObj[k] && chartsObj[k].resize();
    })
  }
})
onBeforeUnmount(() => {
  Object.keys(chartsObj).forEach((k) => {
    chartsObj[k] && chartsObj[k].dispose();
  })
})
const getRegionData = async () => {
  try {
    const res = await api.getRegionData()
    if (res.data && res.data.length) {
      regionTableData.value = res.data
      const seriesData = []
      res.data.forEach((data, i) => {
        if (i<10) {
          seriesData.push({
            name: data.region,
            value: data.percentage
          })
        }

      })
      initLineCharts('region_charts', '地区分布', 'Region', seriesData)
    }
  } catch(e){}
}
getRegionData()
const getEducationData = async () => {
  try {
    const res = await api.getEducationData()
    if (res.data && res.data.length) {
      educationTableData.value = res.data
      const seriesData = []
      res.data.forEach((data) => {
        seriesData.push({
          name: data.education,
          value: data.percentage
        })
      })
      initLineCharts('education_charts', '学历分布', 'Education', seriesData)
    }
  } catch(e){}
}
getEducationData()
const getPositionData = async () => {
  try {
    const res = await api.getPositionData()
    if (res.data && res.data.length) {
      positionTableData.value = res.data
      const seriesData = []
      res.data.forEach((data) => {
        seriesData.push({
          name: data.position,
          value: data.percentage
        })
      })
      initLineCharts('position_charts', '职位分布', 'Position', seriesData)
    }
  } catch(e){}
}
getPositionData()
const getAgeGroupData = async () => {
  try {
    const res = await api.getAgeGroupData()
    if (res.data && res.data.length) {
      ageGroupTableData.value = res.data
      const seriesData = []
      res.data.forEach((data) => {
        seriesData.push({
          name: data['ageGroup'],
          value: data.percentage
        })
      })
      initLineCharts('age_group_charts', '年龄分布', 'AgeGroup', seriesData)
    }
  } catch(e){}
}
getAgeGroupData()
</script>

<style scoped lang="scss">
.page{
  position: relative;
  height: 100%;
}
.charts-group{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  .table-box{
    position: relative;
    flex: 1;
  }
  &+.charts-group{
    margin-top: 35px;
  }
}

</style>
